<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    	<link rel="icon" type="image/png" href="img/favicon.png" sizes="16x16">
		<title>8天出行-地勤车况系统</title>
		<link rel="stylesheet" href="libs/wuui/weui.min.css" />
	</head>

	<body ontouchstart>
		
		<p class="weui-cells__title"><a href="javascript:history.go(-1);" style="font-weight: 900; color: #555;">粤AP7D93</a></p>
		
        <div class="weui-cells weui-cells_form">
        	
            <div class="weui-cell" id="uploaderCustom1">
                <div class="weui-cell__bd">
                    <div class="weui-uploader">
                        <div class="weui-uploader__hd">
                            <p class="weui-uploader__title">处理前</p>
                        </div>
                        <div class="weui-uploader__bd">
                            <ul class="weui-uploader__files" id="uploaderCustomFiles1"></ul>
                            <div class="weui-uploader__input-box">
                                <input id="uploaderCustomInput1" class="weui-uploader__input" type="file" accept="image/*" multiple="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="weui-cell">
            	<div class="weui-cell__bd" style="border: 1px solid #ccc;">
                    <textarea class="weui-textarea" placeholder="备注信息..." rows="3"></textarea>
                    <div class="weui-textarea-counter"><span>0</span>/200</div>
                </div>
			</div>
			
            <div class="weui-cell" id="uploaderCustom2">
                <div class="weui-cell__bd">
                    <div class="weui-uploader">
                        <div class="weui-uploader__hd">
                            <p class="weui-uploader__title">处理前</p>
                        </div>
                        <div class="weui-uploader__bd">
                            <ul class="weui-uploader__files" id="uploaderCustomFiles2"></ul>
                            <div class="weui-uploader__input-box">
                                <input id="uploaderCustomInput2" class="weui-uploader__input" type="file" accept="image/*" multiple="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="weui-cell">
            	<div class="weui-cell__bd" style="border: 1px solid #ccc;">
                    <textarea class="weui-textarea" placeholder="备注信息..." rows="3"></textarea>
                    <div class="weui-textarea-counter"><span>0</span>/200</div>
                </div>
			</div>
			
			
        </div>
        
        <div class="weui-btn-area">
            <a id="uploaderCustomBtn" href="javascript:" class="weui-btn weui-btn_primary">上传</a>
        </div>
		
		<script type="text/javascript" src="libs/zepto.min.js" charset="UTF-8"></script>
		<!--weui.js需要在body里面加载才起作用-->
		<script type="text/javascript" src="libs/weui.js/weui.min.js" charset="UTF-8"></script>
		<script type="text/javascript">
		(function(){
			/* 图片手动上传 */
			var uploadCustomFileList1 = [], uploadCustomFileList2 = [];
			var uploadCount1 = 0, uploadCount2 = 0;

			// 这里是简单的调用，其余api请参考文档
			weui.uploader('#uploaderCustom1', {
				url: 'http://yhaoquan-wx.wicp.net/car/state/uploader',
				auto: false,
				compress: {
			       width: 1600,
			       height: 1600,
			       quality: .4
			   	},
				onBeforeQueued: function(files) {
			       ++uploadCount1;
			   	},
				onQueued: function() {
					uploadCustomFileList1.push(this);
				},
			   	onBeforeSend: function(data, headers){
			       	console.log(this, data, headers);
			       	var carId = '100' ;
			       	var carUserId = '547' ;
			       	var remarkes = '备注' ;
			       	$.extend(data, {
			       		carUserId: carUserId,
			       		carId: carId,
			       		remarkes: remarkes
					});
			   	},
			   	onSuccess: function (ret) {
			       console.log(this, ret);
			   	},
			   	onError: function(err){
			       console.log(this, err);
			   	}
			});
			
			// 这里是简单的调用，其余api请参考文档
			weui.uploader('#uploaderCustom2', {
				url: 'http://yhaoquan-wx.wicp.net/car/state/uploader',
				auto: false,
				compress: {
			       width: 1600,
			       height: 1600,
			       quality: .4
			   	},
				onBeforeQueued: function(files) {
			       ++uploadCount2;
			   	},
				onQueued: function() {
					uploadCustomFileList2.push(this);
				},
			   	onBeforeSend: function(data, headers){
			       	console.log(this, data, headers);
			       	var carId = '100' ;
			       	var carUserId = '547' ;
			       	var remarkes = '备注' ;
			       	$.extend(data, {
			       		carUserId: carUserId,
			       		carId: carId,
			       		remarkes: remarkes
					});
			   	},
			   	onSuccess: function (ret) {
			       console.log(this, ret);
			   	},
			   	onError: function(err){
			       console.log(this, err);
			   	}
			});
			
			// 手动上传按钮
			document.getElementById("uploaderCustomBtn").addEventListener('click', function(){
			    uploadCustomFileList1.forEach(function(file){
			    	console.log(file);
			        file.upload();
			    });
			    uploadCustomFileList2.forEach(function(file){
			    	console.log(file);
			        file.upload();
			    });
			});
			
			// 缩略图预览
			document.querySelector('#uploaderCustomFiles1').addEventListener('click', function(e){
			    var target = e.target;
			
			    while(!target.classList.contains('weui-uploader__file') && target){
			        target = target.parentNode;
			    }
			    if(!target) return;
			
			    var url = target.getAttribute('style') || '';
			    var id = target.getAttribute('data-id');
				url = url.replace(/\"/g, '').replace(/\s+/g, "");
			    if(url){
			        url = url.match(/url\((.*?)\)/)[1];
			    }
			    var gallery = weui.gallery(url, {
			        onDelete: function(){
			        	uploadCount1--;
			            weui.confirm('确定删除该图片？', function(){
			                var index;
			                for (var i = 0, len = uploadCustomFileList1.length; i < len; ++i) {
			                    var file = uploadCustomFileList1[i];
			                    if(file.id == id){
			                        index = i;
			                        break;
			                    }
			                }
			                if(index !== undefined) uploadCustomFileList1.splice(index, 1);
			
			                target.remove();
			                gallery.hide();
			            });
			        }
			    });
			});
			
			// 缩略图预览
			document.querySelector('#uploaderCustomFiles2').addEventListener('click', function(e){
			    var target = e.target;
			
			    while(!target.classList.contains('weui-uploader__file') && target){
			        target = target.parentNode;
			    }
			    if(!target) return;
			
			    var url = target.getAttribute('style') || '';
			    var id = target.getAttribute('data-id');
				url = url.replace(/\"/g, '').replace(/\s+/g, "");
			    if(url){
			        url = url.match(/url\((.*?)\)/)[1];
			    }
			    var gallery = weui.gallery(url, {
			        onDelete: function(){
			        	uploadCount2--;
			            weui.confirm('确定删除该图片？', function(){
			                var index;
			                for (var i = 0, len = uploadCustomFileList2.length; i < len; ++i) {
			                    var file = uploadCustomFileList2[i];
			                    if(file.id == id){
			                        index = i;
			                        break;
			                    }
			                }
			                if(index !== undefined) uploadCustomFileList2.splice(index, 1);
			
			                target.remove();
			                gallery.hide();
			            });
			        }
			    });
			});
			
		})();
		</script>
	</body>

</html>